<template>
  <div class="application">
    <div class="item">
      <span>请假类型:</span>
      <van-dropdown-menu>
        <van-dropdown-item
          v-model="dropdownValue"
          :options="applicationInfo.option"
        />
      </van-dropdown-menu>
    </div>
    <div class="item">
      <span>起始时间:</span>
      <span ref="startEle" @click="timeClick('start')"
        >请点击选择请假开始时间</span
      >
    </div>
    <div class="item">
      <span>结束时间:</span>
      <span ref="endEle" @click="timeClick('end')">请点击选择请假结束时间</span>
    </div>
    <div class="item reason">
      <span>请假事由:</span>
      <van-cell-group inset>
        <van-field
          clearable
          v-model="reason"
          rows="2"
          autosize
          type="textarea"
          maxlength="150"
          placeholder="请输入留言"
          show-word-limit
        />
      </van-cell-group>
    </div>
    <date-time
      @timeFlagChange="timeFlagChange"
      :endTimeFlag="endTimeFlag"
      :startTimeFlag="startTimeFlag"
      @startTimeChange="startTimeChange"
      @endTimeChange="endTimeChange"
    ></date-time>
    <van-button class="submit-button" round type="primary">提交</van-button>
  </div>
</template>

<script lang="js">
import {defineComponent, reactive, ref} from 'vue'
import { useState } from '@/hooks'
import DateTime from './date-time/date-time.vue'
export default defineComponent({
  props: {

  },
  components: {
     DateTime
  },
  setup() {
    const startEle=ref(null)
    const endEle=ref(null)
    const dropdownValue=ref(0)
    const startTimeFlag=ref(false)
    const endTimeFlag=ref(false)
    const reason=ref('')
    const applicationState=useState('mine',["applicationInfo"])
    const timeClick=(type)=>{

      if(type=='start'){
          startTimeFlag.value=true
      }else{
          endTimeFlag.value=true
      }
    }

    const timeFlagChange=()=>{
        startTimeFlag.value=false
        endTimeFlag.value=false
    }

    const startTimeChange=(time)=>{
      startEle.value.innerHTML=time
    }
     const endTimeChange=(time)=>{
      endEle.value.innerHTML=time
    }
    return {
      startEle,
      dropdownValue,
      ...applicationState,
      startTimeFlag,
      endTimeFlag,
      timeClick,
      timeFlagChange,
      startTimeChange,
      endTimeChange,
      endEle,
      reason
    }

  }
})
</script>

<style scoped lang="less">
.application {
  padding: 6vw;
  .submit-button{
    width: 100%;
    margin-top: 2vh;
  }
  .reason {
    align-items: start !important;
  }
  .item {
    display: flex;
    align-items: center;
    padding-bottom: 3vh;
    span {
      margin-right: 2vw;
    }
    span:nth-child(2) {
      color: #8c8c8c;
      font-size: 4vw !important;
    }
    &:deep(.van-dropdown-menu__bar) {
      box-shadow: none !important;
    }
    &:deep(.van-popup--top) {
      padding-left: 3vw !important;
    }
    &:deep(.van-cell-group) {
      margin: 0 !important;
      flex: 1;
      border: 1px solid var(--van-white-color4);
      .van-field__control {
        font-size: 3.8vw !important;
      }
      .van-cell {
        padding: 2vw !important;
      }
    }
  }
}
</style>
